<template>
  <div class="sign-name-wrapper">
    <a-button v-if="!disabled" size="small" type="primary" @click="handleSign">
      签名
    </a-button>
    <div v-if="modelValue" class="sign-name-img">
      <img :src="modelValue" alt="" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineEmits, defineProps } from 'vue';
  import SignNameModal from '@/components/SignNameModal/index';

  interface Props {
    modelValue: string;
    disabled: boolean;
  }
  const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    disabled: false,
  });
  const emit = defineEmits(['update:modelValue']);

  const handleSign = () => {
    SignNameModal().then((res) => {
      emit('update:modelValue', res);
    });
  };
</script>

<style lang="less" scoped>
  .sign-name-wrapper {
    width: 100%;
    .sign-name-img {
      margin-top: 12px;
      width: 100%;
      img {
        width: 100%;
        border: 1px solid #444;
      }
    }
  }
</style>
